<template>
  <view class="filter-wrapper"
        :style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }">
    <view class="inner-wrapper">
      <view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
      <view class="navs">
        <view class="c-flex-align" :class="{ 'c-flex-center': index > 0, actNav: index === actNav }"
              v-for="(item, index) in navData" :key="index" @click="navClick(index)">
          {{getCurText(item)}}
<!--            <view  v-for="(it, idx) in item" :key="idx" v-if="it?.select">{{ it.text }}</view>-->
          <image src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png" mode="" class="icon-triangle"
                 v-if="index === actNav"></image>
          <image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle" v-else></image>
        </view>
        <view class="date-wrapper">
          <picker mode="date" @change="handleDate">
            <view class="date c-flex-align" :style="{ height: height + 'rpx' }" @click="dateClick">
              <view>{{ selDate }}</view>
              <image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle"></image>
            </view>
          </picker>
        </view>
        <view v-if="selDate!=='选择日期'" class="c-flex-align" style="flex-direction: row-reverse;flex: 0;margin-left: 10px">
            <tui-icon name="close" :size="20" @click="reset"></tui-icon>
        </view>
      </view>
      <scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
        <view class="item-opt c-flex-align" :class="item.select ? 'actOpt' : ''"
              v-for="(item, index) in navData[actNav]" :key="index" @click="handleOpt(index)">
          {{ item.text }}
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">

import {defineProps,defineEmits, ref} from "vue";
import {onReady} from "@dcloudio/uni-app";

const props =defineProps({
  height: {//
    type: Number,
    default: 108
  },
  top: {
    type: String,
    default: 'calc(var(--window-statsu-bar) + 44px)'
  },
  border: {
    type: Boolean,
    default: false
  },
  filterData: {
    //必填
    type: Array,
    default: () => {
      return [];
    }
  },
  defaultIndex: {
    //默认选中条件索引,超出一类时必填
    type: Array,
    default: () => {
      return [0];
    }
  }
})
const emits =defineEmits(['onSelected','dateChange','reset'])

const popupShow =ref(false)
const showMask =ref(false)
const actNav = ref()
const selDate=ref('选择日期')
const navData =ref([])  //选项
const selIndex =ref([]) //选中选项

onReady(()=>{
  navData.value=props.filterData
  selIndex.value=props.defaultIndex
  keepStatus()
})

const reset=()=>{
  selDate.value='选择日期'
  Object.keys(selIndex.value).forEach(key=>{
    selIndex.value[key]=0
  })
  keepStatus()
  emits('reset')
}
const getCurText =(items:any)=>{
  for(let i=0;i<items.length;i++){
    if(items[i]?.select){
      return items[i]?.text
    }
  }
}

const keepStatus = () => {
  navData.value.forEach(itemnavData => {
    itemnavData.map(child => {
      child.select = false;
    });
    return itemnavData;
  });
  for (let i = 0; i < selIndex.value.length; i++) {
    let selindex = selIndex.value[i];
    navData.value[i][selindex].select = true;
  }
}

const navClick = (index) => {
  if (index === actNav.value) {
    tapMask();
    return;
  }
  popupShow.value = true;
  showMask.value = true;
 actNav.value = index;
}
const handleOpt = (index:any) => {
selIndex.value[actNav.value] = index;
  keepStatus();
  setTimeout(() => {
    tapMask();
  }, 100);
  let data = [];
  navData.value.forEach(item => {
    let sel = item.filter(child => child.select);
    data.push(sel);
  });
  emits('onSelected', data)
}
const dateClick = () => {
  tapMask();
}
const tapMask = () => {
  showMask.value = false;
  popupShow.value = false;
  actNav.value = null;
}
const handleDate = (e) => {
  let d = e.detail.value;
  selDate.value = d;
  emits('dateChange', d)
}
</script>

<style lang="scss" scoped>
.c-flex-align {
    display: flex;
    align-items: center;
}
.c-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.filter-wrapper {
    .inner-wrapper {
        // position: relative;
        .navs {
            position: relative;
            height: 110rpx;
            padding: 0 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            border-bottom: 2rpx solid #f5f6f9;
            color: #8b9aae;
            z-index: 999;
            box-sizing: border-box;
            & > view {
                flex: 1;
                height: 100%;
                flex-direction: row;
                z-index: 999;
            }
            .date {
                justify-content: flex-end;
            }
            .actNav {
                color: #4d7df9;
                font-weight: bold;
            }
        }
        .mask {
            z-index: 666;
            position: fixed;
            top: calc(var(--status-bar-height) + 44px);
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0);
            transition: background-color 0.15s linear;
            &.show {
                background-color: rgba(0, 0, 0, 0.4);
            }
            &.hide {
                display: none;
            }
        }
        .popup {
            position: relative;
            max-height: 500rpx;
            background-color: #fff;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            overflow: scroll;
            z-index: 999;
            transition: all 1s linear;
            opacity: 0;
            display: none;
            .item-opt {
                height: 100rpx;
                padding: 0 40rpx;
                color: #8b9aae;
                border-bottom: 2rpx solid #f5f6f9;
            }
            .actOpt {
                color: #4d7df9;
                font-weight: bold;
                position: relative;
                &::after {
                    content: '✓';
                    font-weight: bold;
                    font-size: 36rpx;
                    position: absolute;
                    right: 40rpx;
                }
            }
        }
        .popupShow {
            display: block;
            opacity: 1;
        }
    }

    .icon-triangle {
        width: 16rpx;
        height: 16rpx;
        margin-left: 10rpx;
    }
}
</style>
